<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="./js/jquery.js"></script>
	<title></title>
	<style type="text/css">
		body{
			/*font: 12px/1.5 tahoma;*/
			font-size: 12px;
		}
		ul{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		#outer{
			width: 400px;
			margin: 100px auto;
			border: 1px solid black;
		}
		.tab{
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: black;
		}
		.tab li{
			float: left;
			color: white;
			width: 80px;
		}
		.tab li.current{
			background-color: lightgray;
			color: black;
		}
		.content{
			display: none;
		}
		.content ul{
			font-size: 14px;
			text-align: center;
			display: none;
		}
		.content ul:first-child{
			display: block;
		}
	</style>
</head>
<body>
<div id="outer">
	<ul class="tab">
		<li class="current">选项一</li>
		<li>选项二</li>
		<li>选项三</li>
		<li>选项4</li>
	</ul>
	<div class="content">
		<ul>
			<li>内容1</li>
			<li>内容1</li>
		</ul>
		<ul>
			<li>内容2</li>
			<li>内容2</li>
			<li>内容2</li>
			<li>内容2</li>
		</ul>
		<ul>
			<li>内容3</li>
			<li>内容3</li>
			<li>内容3</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$(function () {
	
	$('.tab li').mouseenter(function () {
		if ($(this).index() < 3) {
			$('.content').stop().slideDown(200);
		} else {
			$('.content').stop().slideUp(200);
		}
		
		$(this).addClass('current').siblings().removeClass('current');
		
		console.log($(this).index());
		$('.content ul').eq($(this).index()).show().siblings().hide();
	});
	$('.tab').mouseleave(function(){
		$('.content').stop().slideUp(200);
	});
	$('.content').hover(function(){
		$(this).stop().slideDown(200);
	},function(){
		$(this).stop().slideUp(200);
	});


})
</script>
</body>
</html>
